Skip to content

Home redesign, two-font typeset, and /docs landing route#28

Merged
vigneshrajsb merged 8 commits intomainfrom
docs/design-polish
Apr 26, 2026
Merged

Home redesign, two-font typeset, and /docs landing route#28
vigneshrajsb merged 8 commits intomainfrom
docs/design-polish

Conversation

@vigneshrajsb
Copy link
Copy Markdown
Contributor

Summary

Branch-wide design pass on the docs site. Three threads:

Home page redesign — Workshop-precision aesthetic. Replaced the old feature-grid + hero with a layered narrative: animated grid background with light pulses, hero with kicker + display copy, contrast section, how-it-works with numbered steps, capabilities grid, two-doors CTA, and a simplified site footer. All sections share a single mx-auto max-w-6xl container so home width is consistent across sections (the old container setting was leaking from Tailwind defaults). Prose-width clamp scoped to main:not(.layout-full) so the home is exempt from docs reading constraints.

Typography pivot to a two-font system — IBM Plex Sans for everything not coded; JetBrains Mono for code blocks, inline code, and the Lifecycle wordmark in nav and footer (uppercase, 0.08em tracking). Inter is gone. Docs prose runs at a slightly larger reading scale (1.0625rem / 1.7 / -0.005em) scoped via article.nextra-content main:not(.layout-full), with a tightened heading hierarchy (h1 700/-0.024em, h2-h4 600/-0.018em), tabular numerals on tables, softer inline code chips, and text-wrap: pretty/balance on prose and headings.

/docs landing route — Previously 500 because no index page existed; the only way in was the deep link /docs/what-is-lifecycle. With output: 'export' runtime rewrites/redirects aren't available, so this uses an MDX file at /docs/index.mdx that imports and renders the existing what-is-lifecycle.mdx as a component. Single source of truth, both URLs valid (/docs canonical, /docs/what-is-lifecycle alias), TOC builds correctly on both. Footer "Docs" link points at /docs.

Notable file changes

  • src/components/home/{hero,contrast,how-it-works,capabilities,two-doors,bg,bg/pulses} — new + reworked sections
  • src/components/home/features/* — removed (replaced by capabilities)
  • src/components/site-footer/index.tsx — new minimal footer with mono wordmark
  • src/theme.config.tsx — wordmark in mono uppercase, simplified chrome
  • src/pages/_app.tsx — fonts collapsed to Plex + JetBrains Mono
  • src/styles/globals.css — docs reading hierarchy, scoped via main:not(.layout-full)
  • src/pages/docs/index.mdx — new MDX wrapper for /docs
  • tailwind.config.mjs + eslint.config.mjs — supporting tweaks

Test plan

  • / renders the new home with all five sections, grid pulses animating, single 6xl container width
  • /docs returns 200 and renders the what-is-lifecycle content with full TOC
  • /docs/what-is-lifecycle still returns 200 (alias preserved)
  • Footer "Docs" link routes to /docs
  • Inter does not appear in any rendered HTML; --font-sans resolves to IBM Plex Sans, --font-mono to JetBrains Mono
  • Docs prose has the tightened reading hierarchy (17px / 1.7), but home stays at standard 1rem
  • Sidebar shows "What is Lifecycle?" exactly once (the index entry is display: hidden)
  • bun run lint, bun run typecheck, bun run test all pass
  • Visual sanity check on mobile and desktop widths

Restructures the home page around a calmer, more focused narrative:
hero with copyable install command, contrast section reframed
as a structural shift, capabilities with a copyable lifecycle.yaml,
two-doors split into "run it" and "community". Adds new sections
(capabilities, contrast, two-doors, site-footer) and removes the
duplicate Features grid that overlapped with Capabilities. Tightens
nav hover, theme config, and supporting copy.
Adds Tailwind typography tokens (display, headline, title, body, label, codeline),
a `.kicker` utility, and font-feature ligatures. Caps prose line length on docs.

Fixes home page rendering with system fallback fonts: next/font variable was
scoped inside a wrapping div, so `var(--font-sans)` on body resolved to undefined.
Now defines font CSS variables on `:root` via styled-jsx in _app.tsx so the body
inherits them through the cascade.
…fy chrome

Fixes home layout regressions and adds motion to the hero background.

Layout: replace `container mx-auto px-4` with `mx-auto max-w-6xl px-4 sm:px-6`
across all home sections so widths match Hero. Drop `mx-auto` from HowItWorks
and Contrast headers so kickers left-align with the grids below them.

Prose width: scope the docs `max-width: 72ch / 60ch` rules to
`main:not(.layout-full)` so the home page (`<main class="layout-full">`) is
exempt. The home `<ol>`/`<ul>`/`<h2>` were being clamped, which is what made
the timeline and capabilities pointers visually misaligned.

Motion: new `GridPulses` component renders 6 Hi-Vis Yellow pulses traveling
along the 56px grid lines behind the hero. Mixed axes/directions, gradient
heads, mild glow, snapped to lane offsets. Inherits the same radial mask as
the grid pattern so pulses fade at edges. `prefers-reduced-motion` respected
via the existing global MotionConfig.

Chrome: drop the `oss` badge from the navbar wordmark and the
"Apache 2.0 · © 2025 GoodRx OSS" line from the footer. Simpler wordmark.
Long-form docs prose was reading anonymous in Inter. IBM Plex Sans gives
the engineered DNA expected by devs and platform engineers without losing
neutrality, and pairs naturally with the existing JetBrains Mono code
font. Scoped to docs only via main:not(.layout-full) so the home page,
nav, sidebar, and TOC stay on Inter and the brand layer is preserved.

Also adds the reading hierarchy that was missing: 17px body / 1.7 line-
height, tighter heading tracking, weight ladder (h1 700, h2-h4 600),
text-wrap pretty/balance, tabular numerals on tables, and softer inline
code chips. Wordmark in nav and footer is now JetBrains Mono uppercase
with letter-spacing for a coded, set-in-stone feel.
Previously /docs returned 500 because no index page existed; the only
way to land in the docs was the deep link /docs/what-is-lifecycle.
With output: 'export', runtime rewrites/redirects aren't available, so
this uses an MDX file at /docs that imports and renders the existing
what-is-lifecycle.mdx as a component. Single source of truth, both URLs
remain valid (canonical /docs, alias /docs/what-is-lifecycle), TOC
builds correctly on both. Footer 'Docs' link points at the canonical.
Inter was carrying brand and chrome while IBM Plex Sans was scoped to
docs prose. That made three fonts on the page (Inter, Plex, JetBrains
Mono), which directly contradicted the "no third font" rule the system
was designed around. Plex reads as engineered without losing neutrality,
so it can carry the brand and chrome layers as well, restoring the
two-face commitment.

Drops the Inter import and the --font-docs variable; --font-sans now
resolves to IBM Plex Sans across every surface. The docs-scoped CSS
keeps its reading scale (1.0625rem / 1.7 / -0.005em, headings 700/600
with tighter tracking) but no longer needs to override font-family,
since Plex is global.
@vigneshrajsb vigneshrajsb requested a review from a team as a code owner April 26, 2026 22:57
…and ignore .claude/

Adds the brand/product brief and design tokens that captured the typeset and
two-font decisions, and gitignores local Claude Code state so it doesn't leak
into the repo.
@vigneshrajsb vigneshrajsb merged commit 8c9bb62 into main Apr 26, 2026
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant